<template>
  <section class='f-home' :style="{'height': currentHeight + 'px'}">
    <van-sticky>
      <!-- 顶部导航 -->
      <van-nav-bar class="f-nav-bar" v-if="navBarInfo.show" :title="navBarInfo.title"
        :style="{'background': navBarInfo.bg? navBarInfo.bg: '#000000'}">
        <template v-if="navBarInfo.left" #left>
          <van-icon v-if="navBarInfo.leftType == 'back'" name="arrow-left" size="18" @click="pageBack" />
          <van-icon v-if="navBarInfo.leftType == 'cross'" name="cross" size="18" @click="pageBack" />
        </template>
        <template v-if="navBarInfo.right" #right>
          <van-icon v-if="navBarInfo.rightType == 'search'" name="search" size="18" @click="handlePopup(true)" />
          <p v-if="navBarInfo.rightText" style="color:#fff" @click="pageJump(navBarInfo.path)">{{navBarInfo.rightText}}</p>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 内容 -->
    <router-view class="f-content"
      :class="{isPaddingTop: !navBarInfo.show,isPaddingBottom: ['/index','/order','/tongji','/capital','/more'].includes(activeMenu)}"
      v-slot="{ Component }">
      <keep-alive :include="cacheRouteList">
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <!-- 底部导航 -->
    <van-tabbar v-if="['/index','/order','/tongji','/capital','/more'].includes(activeMenu)" v-model="activeMenu"
      active-color="#488BFE" @change="tabbarChange">
      <van-tabbar-item name="/index" icon="home-o">
        <span>商品</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_commodity_s@2x.png" alt="">
          <img v-else src="@/assets/icons/icon_table_commodity_f@2x.png" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/order" icon="search">
        <span>订单</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_order_s@2x.png" alt="">
          <img v-else src="@/assets/icons/icon_table_order_f@2x.png" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/tongji">
        <span>统计</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/tongji-icon-active.png" alt="">
          <img v-else src="@/assets/icons/tongji-icon.png" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/capital" icon="friends-o">
        <span>收益</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_earnings_s@2x.png" alt="">
          <img v-else src="@/assets/icons/icon_table_earnings_f@2x.png" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="/more" icon="setting-o">
        <span>我的</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/icons/icon_table_me_s@2x.png" alt="">
          <img v-else src="@/assets/icons/icon_table_me_f@2x.png" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>

    <van-popup v-model:show="popup" :closeable="false" position="bottom" close-icon-position="top-left" @closed="handleClose">
      <p class="f-popup-title">订单查询</p>
      <van-search v-model="orderId" clearable placeholder="请输入订单号" />

      <div class="f-popup-btn">
        <van-button block type="primary" @click="handlePopup(false)">确定</van-button>
      </div>
    </van-popup>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import JsBridge from '@/utils/JsBridge.js'
import { warningDeal } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const activeMenu = computed(() => {
      const { meta, path } = route;
      if (meta.openName) {
        return meta.openName;
      }
      return path;
    });

    const state = reactive({
      currentHeight: '',

      orderId: '',
      popup: false,
      showPopup: computed(() => {
        return store.state.showPopup;
      }),

      tabbar: 'index',
      navBarInfo: computed(() => {
        return store.state.navBarInfo;
      }),

      cacheRouteList: computed(() => {
        return store.state.cacheRouteList
      }),
    })

    watch(() => state.showPopup, (newVal, oldVal) => {
      state.popup = state.showPopup
    })

    onMounted(() => {
      state.currentHeight = window.innerHeight

      // 监听手势返回
      JsBridge.registerHandler("onBack", function (data, responseCallback) {
        let urlList = ['/more/changePwd', '/share', '/index', '/order', '/capital', '/more']
        if (!urlList.includes(route.path)) {
          pageBack()
        }
        if (route.path == '/more/changePwd') {
          if (route.query.flag) {
            warningDeal('为保证你的账户安全，请您修改账户密码并重新登录')
          } else {
            pageBack()
          }
        }
      });
    })

    const pageBack = () => {
      router.go(-1)
    };

    const pageJump = (path) => {
      router.push(path)
    }

    const tabbarChange = (path) => {
      store.commit("removeCacheRoute", 'orderList');

      router.replace(path)
      state.tabbar = path
    }

    const handlePopup = (e) => {
      if (e == false) {
        store.commit('setOrderId', state.orderId)
      }
      store.commit('setShowPopup', e)
    }

    const handleClose = () => {
      store.commit('setShowPopup', false)
      state.orderId = ""
    }

    return {
      ...toRefs(state),
      activeMenu,
      pageBack,
      pageJump,
      tabbarChange,
      handlePopup,
      handleClose
    }
  }
}
</script>
<style lang='scss' scoped>
.f-home {
  background-color: #f3f3f3;
  height: 100%;
  .f-nav-bar {
    padding-top: 27px;
  }
  .f-content {
    background-color: #f3f3f3;
    overflow-y: hidden;
    overflow-x: hidden;
    // padding-bottom: 50px;
    // border: 1px solid red;
  }
  .isPaddingTop {
    padding-top: 27px;
  }
  .isPaddingBottom {
    padding-bottom: 50px;
  }
}
</style>

<style>
.van-hairline--bottom:after {
  border-bottom-width: 0 !important;
}
</style>